<template>
  <!-- logo和搜索框 -->
  <div class="logoAndSearch">
    <!-- logo和搜索 -->
    <LogoSearch />

    <Typenav />

    <!-- 主体--->
    <div class="main">
      <div class="main-left" v-show="categoryList.length > 0">
        <ul
          v-for="(c1, index) in categoryList"
          :key="c1.value"
          @click="goSearch"
        >
          <li>
            <a :data-categoryName="c1.text" :data-category1Id="c1.value">{{
              c1.text
            }}</a>
          </li>
        </ul>
      </div>
      <div class="main-left" v-show="categoryList.length === 0">
        <ul>
          <li>
            <a>美食</a>

            <a>火锅</a>

            <a>面包甜点</a>
          </li>
        </ul>
        <ul>
          <li>
            <a>休闲娱乐</a>

            <a>足疗</a>

            <a>ktv</a>
          </li>
        </ul>
        <ul>
          <li>
            <a>结婚</a>

            <a>婚纱摄影</a>

            <a>婚礼策划</a>
          </li>
        </ul>
        <ul>
          <li>
            <a>电影演出赛事</a>

            <a>电影院</a>
          </li>
        </ul>
        <ul>
          <li>
            <a>丽人</a>

            <a>美发</a>

            <a>医学美容</a>
          </li>
        </ul>
        <ul>
          <li>
            <a>美食</a>

            <a>火锅</a>

            <a>面包甜点</a>
          </li>
        </ul>
        <ul>
          <li>
            <a>美食</a>

            <a>火锅</a>

            <a>面包甜点</a>
          </li>
        </ul>
        <ul>
          <li>
            <a>美食</a>

            <a>火锅</a>

            <a>面包甜点</a>
          </li>
        </ul>
        <ul>
          <li>
            <a>美食</a>

            <a>火锅</a>

            <a>面包甜点</a>
          </li>
        </ul>
      </div>
      <!-- 轮播图--->
      <Swipernav />
      <!-- 轮播图右测--->
      <Logininfo />
    </div>

    <!-- 中心内容--->
    <div class="middle_section">
      <!-- 中心内容middle_section_1左边--->
      <div class="middle_section_1">
        <div class="middle_1 clearFix">
          <span class="section1">美食</span>
          <ul>
            <li>私房菜</li>
          </ul>
          <ul>
            <li>私房菜</li>
          </ul>
          <ul>
            <li>私房菜</li>
          </ul>
          <span class="clcek_1">
            <a href="#">全部</a>
          </span>
        </div>
        <router-link to="/detail">
          <div class="main_ll">
            <div
              class="middle_section_11"
              @click="insurance()"
              v-for="(item, index) in foodData"
              :key="index"
            >
              <img :src="item.picUrl" alt="" width="170px" height="95px" />
              <div class="middle_section_111">
                <div>
                  <span class="clcek_2">{{ item.poiName }}</span>
                </div>
                <ul class="clcek_3">
                  <li>{{ item.tip }}条评论</li>
                  <li>{{ item.maincatename }}</li>
                  <li>{{ item.regionname }}</li>
                  <li>{{ item.price }}￥/人</li>
                </ul>
              </div>
            </div>
          </div>
        </router-link>
      </div>
    </div>

    <!-- 底部区域--->
    <div class="pink">
      <div class="pink_1">
        <div class="pink_list clearFix">
          <span class="pink_list_1">美食</span>
          <ul>
            <li>私房菜</li>
          </ul>
          <ul>
            <li>私房菜</li>
          </ul>
          <ul>
            <li>私房菜</li>
          </ul>
          <span class="pink_2">
            <a href="#"> 全部 </a>
          </span>
        </div>
        <div class="img_1">
          <div class="left">
            <img src="../../assets/images/ad1 (2).png" alt="" />
          </div>
          <ul class="right">
            <li class="right_1">
              <img src="../../assets/images/4.png" alt="" />
            </li>
            <li class="right_2">
              <img src="../../assets/images/3.png" alt="" />
            </li>
            <li class="right_3">
              <img src="../../assets/images/2.png" alt="" />
            </li>
            <li class="right_4">
              <img src="../../assets/images/1.png" alt="" />
            </li>
          </ul>
        </div>
      </div>

      <!-- footer底部区域 -->
      <div class="footer">
        <div class="w">
          <div class="mod_service">
            <dl class="mod_help_item">
              <dt>商务合作</dt>
              <dd><a href="#">餐饮代理商招募</a></dd>
              <dd><a href="#">商企通</a></dd>
              <dd><a href="#">美团开放平台</a></dd>
              <dd><a href="#">申请扫码点餐</a></dd>
              <dd><a href="#">美团收单代理商招募</a></dd>
              <dd><a href="#">美团收银合作商招募</a></dd>
              <dd><a href="#">北极星商业开放平台</a></dd>
              <dd><a href="#">免费使用美团排队</a></dd>
              <dd><a href="#">企业差旅、企业用餐</a></dd>
            </dl>
            <dl class="mod_help_item">
              <dt>公司信息</dt>
              <dd><a href="#">媒体报道</a></dd>
              <dd><a href="#">关于我们</a></dd>
              <dd><a href="#">投资者关系</a></dd>
              <dd><a href="#">联系我们</a></dd>
              <dd><a href="#">商户诚信公约</a></dd>
              <dd><a href="#">招聘</a></dd>
              <dd><a href="#">餐饮安全管理办法</a></dd>
            </dl>
            <dl class="mod_help_item">
              <dt>用户帮助</dt>
              <dd><a href="#">客户服务中心</a></dd>
              <dd><a href="#">知识产权维权</a></dd>
              <dd><a href="#">廉正举报平台</a></dd>
            </dl>
            <dl class="mod_help_item mod_help_app">
              <dt>应用下载</dt>
              <dd>
                <img
                  src="../../assets/images/wx_cz (2).png"
                  alt=""
                  width="100px"
                  height="100px"
                />
                <p>扫描下载大众点评APP</p>
              </dd>
            </dl>
          </div>

          <div class="mod_copyrighe">
            <p class="mod_copyrighe_links">
              ©2003-2021 dianping.com, All Rights Reserved.
              本站发布的所有内容，未经许可，不得转载，详见 《知识产权声明》
              《用户使用协议》
            </p>
            <p class="mod_copyrighe_info">
              增值电信业务经营许可证： 沪B2-20040012 | 互联网药品信息服务资格：
              (沪)-经营性-2017-0007
            </p>
            <p class="mod_copyrighe_link">
              网络文化经营许可证： 沪网文[2020]0813-068号 |
              用户举报热线：10100011
            </p>
            <p class="mod_copyrighe_lin">备案号： 沪B2-20040012-1</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Typenav from "./Typenav";
import Swipernav from "./swiper&nav";
import Logininfo from "./logininfo";
import { mapState } from "vuex";
import { reqMainFoodsData } from "../../api";

export default {
  name: "Home",
  data() {
    return {
      Id: "FPcwD2D5x1QfVFoQ",
      foodData: [], //给美食饭馆定义一个新的参数
    };
  },
  //在挂载后给 body 添加一个类名
  mounted() {
    document.querySelector("body").className = "subscribeOverall";
    // 获取主页的美食图片
    this.getMainFoodsData();
    // 分发三级菜单
    this.$store.dispatch("getCategoryList");
  },
  //卸载前将 body 的类名删除
  beforeDestroy() {
    document.body.removeAttribute("class", "subscribeOverall");
  },
  components: {
    Typenav,
    Swipernav,
    Logininfo,
  },
  methods: {
    // 跳转到搜索美食页面
    goSearch(event) {
      let node = event.target;
      let { categoryName, category1id } = node.dataset;

      if (categoryName) {
        //准备路由跳转的参数对象
        let loction = { name: "Search" };
        let query = { categoryName: categoryname };
        //一定是a标签：一级目录
        if (category1id) {
          query.category1Id = category1id;
        }
        //判断：如果路由跳转的时候，带有params参数，捎带脚传递过去
        if (this.$route.params) {
          loction.params = this.$route.params;
          //动态给location配置对象添加query属性
          loction.query = query;

          //路由跳转
        }
        this.$router.push("/search");
        // 点击跳转
      }
      this.$router.push("/search");
    },
    // 点击跳转到店铺详情页面
    insurance() {
      this.$router.push({
        path: "/detail",
      });
    },
    // 获取主页美食信息
    async getMainFoodsData() {
      let res = await reqMainFoodsData();
      this.foodData = res.data.data.showList;
    },
  },
  computed: {
    // 计算三级列表的数据
    ...mapState({
      categoryList: (state) => state.home1.categoryData.splice(1, 17),
    }),
  },
};
</script>

<style lang="css" scoped>
.logoAndSearch {
  width: 1200px;
  /* background: yellow; */
  margin: 0 auto 0;
}

.search {
  /* width: 666px;
	height: 100px; */
  /* background: skyblue; */
  float: left;
  margin: 14px 0 0 90px;
}

.search .search-top li {
  height: 25px;
  width: 50px;
  float: left;
  margin-right: 5px;
  text-align: center;
  line-height: 25px;
  /* 相对定位 */
  position: relative;
  /* 
	鼠标样式
	pointer 小手
	 */
  cursor: pointer;
  color: #ea4a36;
}

.search .search-top li img {
  position: absolute;
  left: 30px;
  top: 15px;
}

.search .search-top .current {
  color: #fff;
  font-weight: 700;
  background: #ea4a36 !important;
}

.search .search-top li:hover {
  background: #ffeee5;
}

.search-center {
  margin: 30px 0 40px 0px;
}

.logoAndSearch .search-center form .txt {
  width: 456px;
  height: 40px;
  border: 2px solid #ea4a36;
  background: url(../../assets/images/fang.png) no-repeat 11px center;
  padding-left: 30px;
  float: left;
  margin: 30px 0 40px 0px;
}

.logoAndSearch .search-center form .btn {
  float: left;
  width: 70px;
  height: 44px;
  background: #ea4a36;
  color: #fff;
  margin: 30px 0 40px 0px;
}

.logoAndSearch .search-bottom {
  margin-top: 7px;
}

.logoAndSearch .search-bottom li {
  float: left;
  margin-right: 10px;
}

/* 第一种logo */

.logoAndSearch .logo {
  float: left;
  overflow: hidden;
}

.logoAndSearch .logo {
  float: left;
  margin: 30px 0 30px 0;
}

.logoAndSearch .logo a {
  display: block;
  width: 210px;
  height: 59px;
  /* /* background: url(../img/Logo.png) no-repeat 0 0; */
  /* 将文本移出到屏幕外 */
  padding-right: 100px;
}

/* 轮播图右侧登录区域 */

/* 轮播图中侧登录区域 */

.main .zhonjian1 {
  width: 780px;
  float: left;
}

.zhonjian1 img {
  height: 300px;
  margin: 10px 10px 10px 10px;
  /* background-color: violet; */
}

/* 轮播图下区域 */

.top {
  float: left;
  margin-left: 10px;
  background-color: #fff;
}

.top .top_1 {
  width: 270px;
  height: 146px;
  float: left;
  background-color: #fff;
  margin: 10px 5px 10px 10px;
  padding-top: 20px;
}

.top .top_1 span {
  margin-top: 20px;
  font-weight: 700;
  font-size: 18px;
}

.top .top_1 {
  text-align: center;
  float: left;
}

.top .top_1 ul {
  text-align: center;
  float: left;
  padding: 10px;
  margin-left: 25px;
}

.top .top_1 ul li {
  margin-top: 10px;
  font-size: 12px;
}

.top .top_2 {
  width: 270px;
  height: 146px;
  float: left;
  background-color: #fff;
  margin: 10px 5px 10px 5px;
  padding-top: 20px;
}

.top .top_2 span {
  margin-top: 20px;
  font-weight: 700;
  font-size: 18px;
}

.top .top_2 {
  text-align: center;
  float: left;
}

.top .top_2 ul {
  text-align: center;
  float: left;
  padding: 10px;
  margin-left: 25px;
}

.top .top_2 ul li {
  margin-top: 10px;
  font-size: 12px;
}

.top .top_3 {
  text-align: center;
  float: left;
}

.top .top_3 {
  width: 190px;
  height: 146px;
  float: left;
  background-color: #fff;
  margin: 10px 5px 5px 5px;
  padding-top: 20px;
}

.top .top_3 span {
  text-align: center;
  margin-top: 20px;
  font-weight: 700;
  font-size: 18px;
}

.top .top_3 ul {
  text-align: center;
  float: left;
  padding: 10px;
}

.top .top_3 ul li {
  margin-top: 10px;
  font-size: 12px;
}

/* 轮播图左侧登录区域 */

.main {
  width: 1200px;
  height: 461px;
  /* background: yellow; */
  margin: 5px auto 0;
}

.main-left {
  width: 210px;
  height: 510px;
  background: #ccc;
  float: left;
}

.main-left ul li {
  font-size: 14px;
  line-height: 30px;
  padding-left: 20px;
  /* 由于子元素浮动,li高度塌陷,必须清除浮动
	*/
  height: 30px;
}

.main-left ul li a {
  float: left;
}

.main-left ul li a:hover {
  text-decoration: underline;
}

.main-left ul li span {
  float: left;
  margin: 0 2px;
}

.main-left ul li:hover {
  background: lightgray;
}

.main-right .main-right-top {
  border: 1px solid #e4e4e4;
}

.main-right {
  width: 200px;
  height: 510px;
  border: 1px solid #e4e4e4;
  margin-top: 20px;
  float: right;
  margin: 0 auto;
}

.main-right .Shuffling_figure-kut .youcetu img {
  width: 60px;
  height: 60px;
  margin: 20px 60px 0 60px;
}

.Shuffling_figure-kut {
  line-height: 20px;
  text-align: center;
}

.main-right .Shuffling_figure-kut .youcetu .dt {
  width: 70px;
  height: 25px;
  float: left;
  margin-left: 20px;
  line-height: 25px;
  background-color: tomato;
}

.main-right .Shuffling_figure-kut .youcetu .youcetu .dt a {
  text-align: center;
}

.main-right .Shuffling_figure-kut .youcetu .dd {
  width: 70px;
  float: right;
  line-height: 25px;
  height: 25px;
  margin-right: 20px;
  background-color: tomato;
}

.middle_section {
  background-color: royalblue;
  margin-top: 80px;
  display: flex;
}

.middle_section .middle_section_1 {
  width: 100%;
  background-color: #fff;
}

.middle_section .middle_section_1 .middle_1 {
  /* box-sizing: border-box; */
  width: 100%;
  padding: 0 30px;
}

.middle_section .middle_section_1 .section {
  display: block;
}

/* 中心内容middle_section_1*/

.middle_section .middle_section_1 ul {
  flex: 1;
  float: left;
  margin: 20px 0px 20px 0px;
}

.middle_section .middle_section_1 .middle_1 li {
  width: 48px;
  height: 20px;
  float: left;
  text-align: center;
  line-height: 20px;
  margin: 0px 0 10px 10px;
  border: 1px solid #b3aeae;
}

.main_ll {
  display: flex;
  width: 100%;
}

.middle_section .middle_section_1 .middle_1 .clcek_1 {
  float: right;
  margin: 20px 110px 20px 0px;
}

.middle_section_1 .middle_1 .section1 {
  display: block;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 700;
  float: left;
}

.section1 {
  color: #000 !important;
}

.middle_section_11 {
  margin-left: 20px;
  flex: 1;
}

.middle_section .clcek_1 a {
  font-size: 16px;
  font-weight: 400px;
  float: right;
  color: #000 !important;
}

.middle_section_111 span {
  /* text-align: left !important; */
  background-color: #fff;
}

/* 中心内容middle_section_2*/

.middle_section_2 {
  flex: 1;
  width: 50%;
  background-color: #fff;
}

.middle_section .middle_section_2 {
  flex: 1;
  width: 50%;
  background-color: #fff;
}

.middle_section .middle_section_2 .section {
  display: block;
}

.middle_section .middle_section_2 .middle_2 {
  /* box-sizing: border-box; */
  width: 100%;
  padding: 0 30px;
}

.middle_section .middle_section_1 .middle_1 {
  /* box-sizing: border-box; */
  width: 100%;
}

.middle_section_2 .middle_2 .section2 {
  display: block;
  font-size: 18px;
  font-weight: 700;
  float: left;
}

.middle_section .middle_section_2 .middle_2 li {
  width: 48px;
  height: 20px;
  float: left;
  text-align: center;
  line-height: 20px;
  margin: 20px 0 10px 10px;
  border: 1px solid #b3aeae;
}

.middle_section .clcek_2 a {
  font-size: 16px;
  font-weight: 400px;
  float: left;
  color: #000;
  display: block;
  margin: 0px 0 10px 10px;
}

/* box-sizing: border-box; */

.middle_section2 {
  background-color: #fff;
  margin-top: 80px;
  display: flex;
}

.main_ll2 {
  display: flex;
  width: 100%;
}

.middle_section .middle_section_2 .middle_2 .clcek_2 {
  float: right;
  margin: 20px 110px 20px 0px;
}

.middle_section_2 .middle_2 .section2 {
  display: block;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 700;
  float: left;
}

.middle_section_112 {
  margin-left: 20px;
  flex: 1;
}

.middle_section .clcek_2 a {
  font-size: 16px;
  font-weight: 400px;
  float: left;
  color: #000;
}

.middle_section_1112 span {
  /* text-align: left !important; */
  color: #ea4a36;
}

.middle_section_112 .middle_section_1112 .clcek_32 {
  /* float: left; */
  /* margin: 120px; */
  margin-top: 20px;
}

/* 底部区域*/

.pink {
  background-color: #fff;
}

.pink_1 {
  width: 100%;
}

.pink .pink_1 .pink_list .pink_2 {
  margin: 0px 0 20px 0px;
}

.pink .pink_1 .pink_list {
  display: block;
  margin-top: 20px;
  font-size: 24px;
  font-weight: 700;
  margin-left: 60px !important;
  color: #000;
}

.pink .pink_1 .pink_list .pink_list_1 {
  float: left;
}

.pink .pink_1 .pink_list ul {
  border: 1px solid #fff;
  display: block;
  float: left;
  border: 1px solid #ea4a36;
  margin: 3px 8px 3px 8px;
}

.pink .pink_1 .pink_list ul li {
  float: left;
  font-size: 12px;
  margin: 5px;
}

.pink_1 {
  flex: 1;
}

.pink .pink_2 a {
  font-size: 16px;
  font-weight: 400px;
  color: #000;
  float: right;
  margin: 7px 10px 0 0;
}

.pink span {
  /* text-align: left !important; */
  color: #fff;
}

.img_1 {
  margin-top: 10px;
  width: 1200px;
  height: 500px;
  background-color: #fff;
}

.left {
  float: left;
  width: 370px;
  height: 410px;
  margin: 25px 25px;
  background-color: #fff;
}

.right {
  float: right;
  width: 780px;
  height: 466px;
  background-color: #fff;
}

.right li {
  float: left;
  width: 350px;
  height: 195px;
  margin: 25px 40px 10px 0px;
  background-color: seagreen;
}

/*  footer底部区域  */

.footer {
  height: 540px;
  background-color: #f5f5f5;
}

.mod_service {
  height: 311px;
  background: #fff;
  border-bottom: 1px solid #ccc;
  color: #000000 !important;
}

.mod_help_item {
  float: left;
  width: 275px;
  padding: 50px 0 0 25px;
}

.mod_help_item dt {
  height: 25px;
  font-size: 18px;
  font-weight: 700;
}

.mod_help_item dd {
  height: 25px;
}

.mod_help_item dd img {
  text-align: center;
  margin: 10px 30px 10px 25px;
}

.mod_help_app dt,
.mod_help_app p {
  padding-left: 15px;
}

.mod_copyrighe {
  text-align: center;
}

.mod_copyrighe_links {
  margin: 20px 0 15px 0;
}

.mod_copyrighe_info {
  margin: 0 0 15px 0;
}

.mod_copyrighe_lin {
  margin: 15px 0 15px 0;
}
</style>